<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">

        .myhide{
          display: none;
        }

        @media screen and (min-width: 992px){
          .myhide{
            display: block;
          }
        }


        @media screen and (min-width: 760px) and (max-width: 1000px){
          .mymedia{
            color:blue;
          }
        }

        @media screen and (max-width: 760px){
          .mymedia{
            color:#FD03A3;
          }
        }

        @media screen and (min-width: 1000px){
          .mymedia{
            color:#EC8D14;
          }
        }

        @media screen and (max-width: 992px){
          .lameg{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            opacity: 1;
            background-color:#24D8F3;
        }

        .myfore{
          padding: 5px;
        }
        @media screen and (min-width: 768px){
          .myfore{
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 100px;
          }
        }

    </style>
</head>
<body>
  <nav class="navbar navbar-default" role="navigation" style="margin-bottom:0">
      <div class="container-fluid">
            <div class="navbar-header" style="float:left">
              <a class="navbar-brand" href="#">
              <i class="glyphicon glyphicon-plus"></i>
              菜鸟教程</a>
            </div>

          <!-- <div>
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">IOS</a></li>
                  <li><a href="#">SVN</a></li>
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          JAW
                          <b class="caret"></b>
                      </a>
                      <ul class="dropdown-menu">
                          <li><a href="#">jmeter</a></li>
                          <li><a href="#">EJB</a></li>
                          <li><a href="#">Jasper Report</a></li>
                          <li class="divider"></li>
                          <li><a href="#">分离的链接</a></li>
                          <li class="divider"></li>
                          <li><a href="#">另一个分离的链接</a></li>
                      </ul>
                  </li>
              </ul>        
          </div> -->
                
          <div class="btn-group pull-right" style="position:relative;">
              <a class="dropdown-toggle" data-toggle="dropdown">
                  <img src="images/Penguins.png" class="pull-right img-circle"
                  style="width:50px;height:50px;">
                  <span class="badge pull-right" style="background-color:red;border-radius:22px;height:22px;width:22px;line-height:22px;padding:0 ;position:absolute;top:0;right:-8px;">99+</span>
              </a>
              <ul class="dropdown-menu" role="menu">
                  <li>
                    <a href="#" class="text-center ang">消息<span class="badge" style="height:22px;width:30px;line-height:22px;padding:0 ;">99+</span></a>
                    </li>
                    <li>
                    <a href="#" class=" text-center ing">功能列表</a>
                    </li>
                    <li>
                    <a href="#" class=" text-center">退出登录</a>
                    </li>
              </ul>
          </div>

      </div>       
  </nav>

    <div class="container-fluid">
        <div class="row" style="position:relative">
        <!--左侧菜单-->
           <div class="col-md-2 lameg" style="background-color:#24D8F3;min-height:1000px;padding:0">
              <div class="panel-group" id="accordion">
                 <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title text-center">
                            <a data-toggle="collapse" data-parent="#accordion" 
                            href="#collapseOne">
                            用户管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                            vice lomo.　 
                        </div>
                    </div>
                 </div>
                 <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title text-center">
                            <a data-toggle="collapse" data-parent="#accordion" 
                            href="#collapseTwo">
                            系统管理
                        </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                        vice lomo.
                    </div>
                    </div>
                 </div>
                 <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title text-center">
                            <a data-toggle="collapse" data-parent="#accordion" 
                            href="#collapseThree">
                            系统设置
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                          Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                          cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                          vice lomo.
                    </div>
                </div>
              </div>
            </div>
            </div>
        <!--右侧默认功能列表内容-->
          <div class="col-md-10 mymedia" style="margin-left:-20px;margin-right:-20px;">
                    <ul class="breadcrumb">
                        <li><a href="#">控制台</a></li>
                        <li>分布任务</li>

                    </ul>

              <div class="row myfore" style="padding-top:50px;padding-left:50px;padding-right:100px;">
                    <div class="progress progress-striped active">
					    <div class="progress-bar progress-bar-success" role="progressbar"
					         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
					         style="width: 25%; background-color:#2D7DFB;">
					        <span class="sr-only lamakg">25% 完成</span>
					    </div>
					</div>

                  <div class="row myfore" style="padding-left:15px;">
                    <form role="form">
                      
                      <div class="form-itme lameng">
                          <div role="form-group">
                            <h3 class="text-center">1</h3>
                            <label for="name">名称</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          <div>
                            <label for="name">数量</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          <div>
                            <label for="name">备注</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          <div class="checkbox">
                            <label>
                              <input type="checkbox">请打勾
                            </label>
                            </div>
                      </div>

                      <div class="form-itme" style="display:none">
                          <div class="form-group">
                          <h3 class="text-center">2</h3>
                            <label for="name">名称</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          <div>
                            <label for="name">数量</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                           <div>
                            <label for="name">备注</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                           </div>
                           <div class="checkbox">
                            <label>
                              <input type="checkbox">请打勾
                            </label>
                            </div>
                      </div>
                      <div class="form-itme"  style="display:none">
                          <div class="form-group">
                          <h3 class="text-center">3</h3>
                            <label for="name">名称</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          <div>
                            <label for="name">数量</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                           <div>
                            <label for="name">备注</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                           </div>
                           <div class="checkbox">
                            <label>
                              <input type="checkbox">请打勾
                            </label>
                            </div>
                      </div>

                      <div class="form-itme"  style="display:none">
                          <div class="form-group">
                          <h3 class="text-center">4</h3>
                            <label for="name">名称</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          
                          <div>
                            <label for="name">数量</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                           <div>
                            <label for="name">备注</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入名称">
                          </div>
                          <div class="checkbox">
                            <label>
                              <input type="checkbox">请打勾
                            </label>
                            </div>
                      </div>
                       
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
					    <div class="modal-dialog" style="background-color:#24D8F3">
					        <div class="modal-content">
					            <div class="modal-header" style="background-color:  #24D8F3">
					            <div class="modal-body text-center"><h3 style="color:#fff">任务已完成</h3>
					            <div class="modal-footer">
					                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				                </div>
				                </div>
					            </div>
					        </div><!-- /.modal-content -->
					    </div><!-- /.modal -->
					</div>
                            
                    </form>
                  </div>

                  <div class="row">
                     <div class="col-md-6 col-sm-6">
                        <button  class="btn btn-primary btn-block nexea">上一步</button>
                     </div>
                     <div class="col-md-6 col-sm-6">
                        <button class="btn btn-primary btn-block nexe">下一步</button>
                        <button class="btn btn-primary btn-block  text donen " data-toggle="modal" data-target="#myModal" style="display:none">提交</button>
                     </div>
                  </div>
              </div>
          </div>
        </div>
    </div> 
    </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery3.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">

    //加减切换

     $(".glyphicon").click(function(){
     $(".glyphicon").toggleClass("glyphicon-minus");
     $(".lameg").toggleClass("myhide");
     });

    
     // $(".glyphicon-plus").click(function(){
     // $(".glyphicon-plus").hide();
     // $(".glyphicon-minus").show();
     // });

     // $(".glyphicon-minus").click(function(){
     // $(".glyphicon-plus").show();
     // $(".glyphicon-minus").hide();
     // });
     
    //进度条，默认列表切换
	    $(".nexe").click(function(res){

		    $('.form-itme').each(function(){
		    	var display=$(this).css('display');
		    	if(display=='block'){
		    		var n=$(this).index()+1;
		    		var p=(n+1)/4*100+'%';
		    		$('.progress-bar').css('width',p);
		    		$('.lamakg').text(p,'已完成');
		    		if (n<4){
	                   $('.form-itme').hide();
	                   $('.form-itme:eq('+n+')').show();
	                   if (n==3) {
	                   	$('.nexe').hide();
	                   	$('.donen').show();
	                   }
	                   return false;
		    		}
		    	}
		    })
	    })



    </script>
</body>
</html>